<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3 class="page-title">角色权限</h3>
			<ul class="breadcrumb">
				<li>
					<i class="icon-home"></i>
					<a href="<c:url value="/home.html"/>">首页</a> 
					<i class="icon-angle-right"></i>
				</li>
				<li>
					<a href="<c:url value="/role/list.html"/>">角色管理</a>
					<i class="icon-angle-right"></i>
				</li>
				<li>
					<a href="#">权限分配</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box blue">
				<div class="portlet-title">
					<div class="caption"><i class="icon-bookmark"></i> 权限分配</div>
				</div>
				<div class="portlet-body form">
					<form id="role-permission-form" action="<c:url value="/role/${role.id }/permissionSave.html"/>" method="post" class="form-horizontal">
						<div class="alert alert-error hide">请检查下面的错误</div>
						<div class="control-group">
							<label class="control-label">角色:</label>
							<div class="controls">
								<span style="line-height:20px;padding:6px;" class="label label-info">${role.name }</span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">权限:</label>
							<div class="controls">
								<ul id="tree" class="ztree"></ul>
							</div>
						</div>
						<div class="form-actions">
							<button id="role-perm-submit" class="btn blue" type="button"><i class="icon-ok"></i> 保存</button>
							<a href="<c:url value="/role/list.html"/>" class="btn black" type="button"><i class="icon-share-alt"></i>返回</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="<c:url value="/static/js/jquery.ztree.all-3.5.min.js"/>"></script>
<script type="text/javascript">
function get_perm_submit(){
	var t = $.fn.zTree.getZTreeObj("tree");
	var nodes = t.getCheckedNodes();
	var ids = [];
	$.each(nodes, function(i,n){
		ids.push("ids="+n.id);
	});
	ids = ids.join("&");
	
	var $form = $("#role-permission-form");
	var url = $form.attr("action");
	$form.parent().find(".alert").remove();
	if(ids.length<1){
		$form.before("<div class='alert alert-error'> 未选择任何权限</div>");
		App.scrollTo($("#role-permission-form").parent(), -200);
		return;
	}
	$.post(url, ids, function(msg){
		if(msg.status=="success"){
			$form.before("<div class='alert alert-success'> "+msg.message+"</div>");
		}else{
			$form.before("<div class='alert alert-error'> "+msg.message+"</div>");
		}
		App.scrollTo($("#role-permission-form").parent(), -200);
	}, "json");
}
$(document).ready(function(){
	$("#role-perm-submit").bind("click", get_perm_submit);
	
	var setting = {
	        check: {
	            enable: true
	        },
	        view: {
	            dblClickExpand: false,
	            showLine: true,
	            selectedMulti: false
	        },
	        data: {
	            simpleData: {
	                enable:true,
	                idKey: "id",
	                pIdKey: "pid"
	            }
	        },
	        callback: {
	            beforeClick: function(treeId, treeNode) {
	                var zTree = $.fn.zTree.getZTreeObj("tree");
	                if (treeNode.isParent) {
	                    zTree.expandNode(treeNode);
	                    return false;
	                } else {
	                    return true;
	                }
	            }
	        }
	    };
	var zNodes = ${nodes};
	$.fn.zTree.init($("#tree"), setting, zNodes);
	var rolePermissions = ${rolePermissions};
	var treeObj = $.fn.zTree.getZTreeObj("tree");
	for(var i in rolePermissions){
		var n = treeObj.getNodeByParam("id", rolePermissions[i]);
        treeObj.checkNode(n, true, true);
	}
});
</script>
